草庐IT

Vue + element-ui el-tree 虚拟滚动

全部标签

javascript - 如何在 Vue.js 中保持可排序数组和组件的顺序

我正在使用Vue.js和Dragula制作一个拖放图block页面。每个图block都包含自己的一组数据,因此每个图block都是一个Vue组件。问题是,一旦我拖放其中一个图block,Vue实例中的DOM元素和数据数组就会失去同步并开始引起问题。只是拖放不会产生问题,但是一旦我拖放某些东西然后尝试删除它,一切都会出错。这是一个fiddle:https://jsfiddle.net/wfjawvnL/13/这是我的HTML,带有组件模板:{{$data|json}}{{name}}Index:{{index}}✗这是我的Vue实例:varvm=newVue({el:'#a

javascript - 是否可以针对特定的 jQuery Ajax 调用禁用 Turbolinks 以防止页面刷新和滚动?

我有一个Rails5应用程序,非常想使用Turbolinks。在应用程序中有几个PATCHajax调用,它们只是用新数据更新服务器,但不需要担心更新页面的状态。只要这些ajax请求返回,Turbolinks就会刷新页面并且浏览器会滚动到屏幕顶部。这是不可取的行为;最好让东西留在原处。禁用Turbolinks可以解决这个问题。导致问题的示例(super基本)ajax调用:$.ajax({method:"PATCH",url:url,data:obj});是否有其他人遇到过这种情况或对如何防止页面滚动发生有任何想法? 最佳答案 有同样的

javascript - TypeError : str. replace is not a function strange error with vue.js Ajax 调用

我收到一个奇怪的错误:vue-resource.common.jsUncaughtTypeError:str.replaceisnotafunction它似乎与我正在获取一些的ajax调用有关数据:exportdefault{data:()=>({recipes:[]}),ready(){this.$http.get('http://localhost:3000/recipes',{headers:{'Access-Control-Allow-Origin':true}}).then((recipes)=>{this.$set('recipes',recipes)})}};我是vue.

javascript - Vue.js 2 : Conditional Rendering not working

我在使用ConditionalRendering时遇到问题,因为没有一个例子是有效的。这是Vue代码:Vue.component('sub-folder',{props:['folder'],template:'#template-folder-item'});varbuildFoldersList=newVue({el:'#sub-folders',data:{foldersList:this.foldersList,foldersStatus:this.foldersStatus},created(){this.buildFolders()},methods:{buildFolde

javascript - Webpack 开发服务器不热重新加载 .vue 文件

一直在做一个项目,并确定HMR正在工作,如果我更新我的任何.js文件,webpack都会编译,并且模块会被替换掉。我正在处理一个.vue文件,webpack会重新编译,但没有super新鲜的HMR。希望有人可以看一下并告诉我是否有问题:我在cli中使用的脚本如下所示。webpack-dev-server--d--watch--output-path./public--config./_src/webpack.config.js--progress--env.dev我猜最重要的一点是:devServer:{contentBase:'public',hot:true,filename:'m

javascript - 如何在 Vue JS 的单个文件中访问样式内的组件变量

有没有vue插件可以让我们在side中使用模板变量?单个文件组件中的标记,例如{{display}}exportdefault{data(){return{display:'block'}}}body{display:{{display}}}任何更好的方法/插件来做到这一点??我已经知道:style和:class 最佳答案 里面的Vue模型(数据层)我觉得没办法访问在当前版本的Vue.Vue只能控制DOM树,不能帮助您处理CSSOM。您可能正在使用WebPack或其他bundler,并在您拥有的单个文件中编写模块化组件。,,和.您的

具有与默认行为相同的Javascript自定义滚动js

我在一个div中添加了一个水平滚动条。 我增加了内部div#custom_scroll_child的宽度。但是这些滚动条在手机上是不可见的。所以我想包括js库。当我添加任何像mCustomScrollbar这样的js库时,它的滚动条宽度和向左滚动与默认滚动条不匹配。所以我想要自定义滚动条的设计。但是想要原生滚动条的行为。那么我该如何实现呢?请指导我。 最佳答案 尝试以下操作。body{margin:0px;padding:0px;color:black;}.custom_scroll{width:91%;overflow:

javascript - Vue - 如何将父引用作为 Prop 传递给子?

我正在尝试将当前组件的ref传递给这样的子组件:constParent={name:'parent',data:{screenRef:{}},mounted(){this.screenRef=this.$refs['screen']}}由于Vue.js类型不支持HTMLDivElement,当我将screenRef定义为prop时,我在子组件中遇到错误。constChildComponent={name:'child',props:{screen:{type:HTMLDivElement,default:{}}}}有人可以告诉我正确的方法吗? 最佳答案

javascript - jQuery:将文本区域滚动到给定位置

我有一个包含大量文本的文本区域:lotsandlotsoftextgoeshere我想向下滚动文本区域,以便用户可以看到第2000个字符。我如何使用javasctipt/jQuery执行此操作?$('#txt').scrollToCharNo(2000);//somethinglikethiswouldbegreat编辑(我的解决方案)好吧,我设法让它自己工作。我发现的唯一方法是创建一个与文本区域具有相同字体和宽度的DIV,将SPAN放在所需字符附近并找到该span的位置。我敢肯定,有人可能会发现我的解决方案很有用,所以我会把它粘贴在这里:jQuery.fn.scrollToText=

javascript - 防止在 iOS 上滚动 HTML5 <video> 元素

我试图阻止在MobileSafari上包含HTML5视频元素的Web应用程序中的默认滚动。处理document.ontouchmove和调用e.preventDefault()是我发现实现此目的的标准方法。这似乎在任何地方都有效,除了当您触摸视频元素的顶部时,您可以开始向四周拉动页面,就好像它要滚动一样。这似乎只有在强制打开native视频控件时才会发生。如果您不包含controls属性并以可以在线播放的方式加载视频(例如在iPad上或在设置了allowsInlineMediaPlayback的UIWebView中),则会正确阻止滚动。所以它似乎与捕获事件的native视频控件(大播放